<template>
  <div id="menuBox">
    <div id="menuDiv">
      <div>
        <p class="title">我的资产</p>
        <ul>
          <li>
            <router-link to="/asset" :class="active === 0 ? 'active' : ''">资产总览</router-link>
          </li>
          <li>
            <router-link to="/assetCanUse" :class="active === 1 ? 'active' : ''">可用资产</router-link>
          </li>
          <li>
            <router-link to="/assetCoins" :class="active === 2 ? 'active' : ''">数字货币</router-link>
          </li>
          <li>
            <router-link to="/bill" :class="active === 3 ? 'active' : ''">资产账单</router-link>
          </li>
        </ul>
      </div>
      <div>
        <p class="title">算力合约</p>
        <ul>
          <li>
            <router-link to="/contractList" :class="active === 4 ? 'active' : ''">我的合约</router-link>
          </li>
          <li>
            <router-link to="/profitList" :class="active === 5 ? 'active' : ''">算力产出</router-link>
          </li>
          <li>
            <router-link to="/transferList" :class="active === 6 ? 'active' : ''">算力转让</router-link>
          </li>
        </ul>
      </div>
      <div>
        <p class="title">我的账户</p>
        <ul>
          <li>
            <router-link to="/safeCenter" :class="active === 7 ? 'active' : ''">账户&安全</router-link>
          </li>
          <li>
            <router-link to="/bankCardManage" :class="active === 8 ? 'active' : ''">银行卡管理</router-link>
          </li>
          <li>
            <router-link to="/outCoinAddressManager" :class="active === 9 ? 'active' : ''">提币地址管理</router-link>
          </li>
          <li>
            <router-link to="/powerLevel" :class="active === 10 ? 'active' : ''">算龄</router-link>
          </li>
          <li>
            <router-link to="/invited" :class="active === 11 ? 'active' : ''">邀请好友</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  const views = [
    ['/asset','/recharge','/rechargepublic' , '/rechargeResult' , '/cashWithdraw' ,'/cashwithdrawResult' , '/outCoins' ,
      '/addressManage', '/outCoinAddressManager',
    ],
    ['/assetCanUse'],
    ['/assetCoins'],
    ['/bill'],
    ['/contractList' , '/rechargeElectric' , '/returnOrder' , '/transferOrder' , '/renewalOrder'],
    ['/profitList'],
    ['/transferList'],
    ['/safeCenter' , '/relNameVerification' , '/verificationResult'],
    ['/bankCardManage' , '/addBank'],
    ['/outCoinAddressManager'],
    ['/powerLevel'],
    ['/invited']
  ];
  export default {
    name: 'leftMenu',
    data() {
      return {
        pageName: '',
        active: null,
      }
    },
    watch: {
      '$route.path'(path) {
        this.setActive(path)
      }
    },
    mounted() {
      let path = this.$route.path;
      this.setActive(path)
    },
    methods: {
      setActive(path) {
        let thiz = this;
        path = path.toLowerCase();
        let active = null;
        this.for(views, (cur, index) => {
          thiz.for(cur,(item , i ) => {
            item = item.toLowerCase();
            cur[i] = item;
          });
          if (cur.indexOf(path) != -1) {
            active = index;
          }
        });
        this.active = active || 0;
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #menuBox{
    padding-bottom: 262px;width: 147px;overflow: hidden;float: left;padding-top: 102px;
    #menuDiv{
      min-height: 580px;background: #fff;.borderRadius();padding-bottom: 30px;
      .title{
        padding-left: 22px;padding-top: 24px;padding-bottom: 10px;font-size: 16px;color: #262626;font-weight: 600;font-family: MicrosoftYaHei-Bold;
      }
      li{
        padding: 9px 0;
        a{
          padding-left: 22px;color: #999999;font-size: 14px;line-height: 16px;height:16px;display: inline-block;width: 100%;position: relative;text-align: left;
          transition: color 0.15s;
          &:hover{
            .colorYellow;
          }
          &.active{
            .colorYellow;
            &:before{
              content: '';display: inline-block;width: 3px;.bgYellow;position: absolute;z-index: 1;left: 0;top: 0;height: 100%;
            }
          }
        }
      }
    }
  }
</style>
